<template>
    <div class="dept_manage_span">
        <table-span
            :current-page="tabelData.current"
            :page-size="tabelData.size"
            :total="tabelData.total"
            :isShowTool="false"
            :isShowPagePlug="false">
            <template v-slot:searchItem>
                <div class="search_item_span">
                    <el-button icon="Refresh" size="default" type="primary" @click="searchDeptData">刷新</el-button>
                </div>
                <div class="search_item_span">
                    <el-button icon="Plus" size="default"
                        type="primary" :disabled="!(btOption.btDeptSave)"
                        @click="openDeptDialog(null, null, null)">新增部门</el-button>
                </div>
            </template>
            <template v-slot:searchTable>
                <el-table :data="tabelData.records"
                    size="default" height="100%" style="width: 100%;"
                    default-expand-all
                    row-key="deptId"
                    :tree-props="{ children: 'children', hasChildren: 'hasChildren'}">
                    <el-table-column
                        align="left"
                        prop="deptName"
                        label="部门名称"
                        min-width="190">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="sort"
                        label="排序"
                        width="120">
                    </el-table-column>
                    <el-table-column
                        fixed="right"
                        align="center"
                        label="操作"
                        width="260">
                        <template #default="scope">
                            <el-button type="primary" size="small" :disabled="!(btOption.btDeptSave)"
                                @click="openDeptDialog(null, null, scope.row.deptId)">新增下级部门</el-button>
                            <el-button size="small" :disabled="!(btOption.btDeptUpdate)"
                                @click="openDeptDialog(scope.$index, scope.row, null)">编辑</el-button>
                            <el-button size="small" type="danger"  :disabled="!(btOption.btDeptDelete)"
                                @click="btDeptDelete(scope.$index, scope.row)">删除</el-button>
                            </template>
                    </el-table-column>
                </el-table>
            </template>
        </table-span>
        <el-dialog
            v-model="deptDialogOption.show"
            :title="deptDialogOption.title"
            width="450px"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :before-close="deptDialogBeforeClose"
            @close="deptDialogClose">
            <el-form
                ref="deptFormRef"
                :model="deptDataForm"
                :rules="deptFormRules"
                label-width="80px"
                status-icon
            >
                <el-form-item label="部门名称" prop="deptName">
                    <el-input v-model="deptDataForm.deptName" placeholder="请填写部门名称" :clearable="true"></el-input>
                </el-form-item>
                <el-form-item label="父级部门" prop="parentId">
                    <el-tree-select
                        v-model="deptDataForm.parentId"
                        :data="tabelData.rootRecords"
                        value-key="deptId"
                        :props="{label: 'deptName'}"
                        check-strictly
                        :render-after-expand="false"
                        :check-on-click-node="true"
                        show-checkbox
                        style="width: 330px"
                        clearable
                        placeholder="请选择父级部门"
                    />
                </el-form-item>
                <el-form-item label="部门排序" prop="sort">
                    <el-input-number v-model="deptDataForm.sort" :min="1" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="deptDialogBeforeClose">取消</el-button>
                    <el-button type="primary" @click="confirmDeptDialog">
                        保存
                    </el-button>
                 </span>
            </template>
        </el-dialog>
    </div>
</template>
<script>
import TableSpan from '@/components/table-span.vue';
import {tool} from "@/js/tool.js";
import { ElMessage } from 'element-plus'

export default {
    name: "deptManage",
    data: function(){
        return {
            btOption: {
                btDeptSave: null,
                btDeptUpdate: null,
                btDeptDelete: null
            },
            tabelData: {
                total: 0,
                size: 10,
                current: 1,
                records: [],
                rootRecords: [],
            },
            deptDialogOption: {
                show: false,
                title: "",
                type: 0 //0新增；1修改
            },
            deptDataForm: {
                deptId: null,
                deptName: "",
                parentId: null,
                sort: 1
            },
            deptFormRules: {
                deptName: [
                    { required: true, message: '请填写部门名称', trigger: 'blur' },
                    { max: 60, message: '部门名称不能超过60个字符', trigger: 'blur' }
                ],
                parentId: [
                    { required: true, message: '请选择父级部门', trigger: 'blur' }
                ],
                sort: [
                    { required: true, message: '请填写排序', trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        searchDeptData: function(){
            getDeptList(this,{});
        },
        openDeptDialog: function(index, row, parentId){
            if(row == null){
                //新增
                this.deptDialogOption.type = 0;
                this.deptDialogOption.title = "新增部门";
                this.deptDataForm.parentId = parentId;
            }else {
                //编辑
                this.deptDialogOption.type = 1;
                this.deptDialogOption.title = "编辑部门";

                this.deptDataForm.deptId = row.deptId;
                this.deptDataForm.parentId = row.parentId;
                this.deptDataForm.deptName = row.deptName;
                this.deptDataForm.sort = row.sort;
            }
            this.deptDialogOption.show = true;
        },
        confirmDeptDialog: function(){
            const obj = this;
            this.$refs["deptFormRef"].validate(function(valid) {
                if(valid) {
                    if(obj.deptDialogOption.type == 0){
                        //新增
                        saveDept(obj);
                    }else{
                        //修改
                        updateDept(obj);
                    }
                }
            })
        },
        btDeptDelete: function(index, row){
            const obj = this;
            const confirmMessage = "是否删除当前选择的部门：" + row.deptName + "?";
            this.$confirm(confirmMessage).then(function(){
                const param = {
                    deptId : row.deptId
                };
                deleteDept(obj, param);
            }).catch(function(){

            });
        },
        deptDialogBeforeClose: function(){
            deptDialogCloseTips(this);
        },
        deptDialogClose: function(){
            this.deptDataForm = {
                deptId: null,
                deptName: "",
                parentId: null,
                sort: 1
            };
            this.$refs["deptFormRef"].clearValidate();
        }
    },
    created: function(){
        const menuId = [this.$route.query.menuId];
        const obj = this;
        new tool.getAuthorisedRequest(menuId, this.btOption, function(){
            getDeptList(obj,{});
        });
    },
    components: {
        TableSpan
    }
}

/**
* 获取部门信息列表
* @param app app对象
* @param param 获取数据的列表
*/
function getDeptList(app,param){
    const url = "/user/dept/list";
    tool.formJsonRequest(url,param,null,function(data){
        if(data.code === "0000"){
            app.tabelData.records = data.data;
            app.tabelData.rootRecords = [{
                deptId: 0,
                deptName: "根目录",
                parentId: -1,
                children: data.data,
                sort: 1
            }];
        }else{
            ElMessage({
                showClose: true,
                message: data.message,
                type: 'error'
            });
        }
    });
}

/**
* 保存部门信息
* @param app app对象
*/
function saveDept(app) {
    const param = app.deptDataForm;
    const url = "/user/dept/save";
    tool.formJsonRequest(url,param,null,function(data){
        if(data.code == "0000"){
            ElMessage({
                showClose: true,
                message: '保存部门成功',
                type: 'success'
            });
            app.deptDialogOption.show = false;
            getDeptList(app, {});
        }else{
            ElMessage({
                showClose: true,
                message: data.message,
                type: 'error'
            });
        }
    });
}

/**
* 保存部门信息
* @param app app对象
*/
function updateDept(app) {
    const param = app.deptDataForm;
    const url = "/user/dept/update";
    tool.formJsonRequest(url,param,null,function(data){
        if(data.code == "0000"){
            ElMessage({
                showClose: true,
                message: '更新部门成功',
                type: 'success'
            });
            app.deptDialogOption.show = false;
            getDeptList(app, {});
        }else{
            ElMessage({
                showClose: true,
                message: data.message,
                type: 'error'
            });
        }
    });
}

/**
* 删除部门信息
* @param app app对象
* @param param 请求参数
*/
function deleteDept(app, param) {
    const url = "/user/dept/delete";
    tool.formJsonRequest(url,param,null,function(data){
        if(data.code == "0000"){
            ElMessage({
                showClose: true,
                message: '删除部门成功',
                type: 'success'
            });
            getDeptList(app, {});
        }else{
            ElMessage({
                showClose: true,
                message: data.message,
                type: 'error'
            });
        }
    });
}

/**
* 弹窗关闭时的提示信息
* @param app
*/
function deptDialogCloseTips(app) {
    let confirmMessage = "";
    if(app.deptDialogOption.type == 0){
        confirmMessage = "是否放弃新增部门？";
    }else{
        confirmMessage = "是否放弃编辑部门？"
    }
    app.$confirm(confirmMessage).then(function(){
        app.deptDialogOption.show = false;
    }).catch(function(){

    });
}

</script>
<style scoped>
    .dept_manage_span{
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        font-family: Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;
        flex-wrap : wrap;
    }
    .search_item_span{
        max-width: 190px;
        height: auto;
        margin-top: 5px;
        margin-left: 10px;
    }
    .search_item_fix_width{
        width: 190px;
    }
</style>